import ArticleItem from '@/components/ArticleItem'
import { useState, useEffect } from 'react'
import styles from './index.module.scss'
import request from '@/utils/request'
import { useNavigate } from 'react-router-dom'

/*
文章列表组件
@param {String} props.channelId 当前文章列表所对应的频道ID
@param {String} props.aid 当前 Tab 栏选中的频道ID
 */
const ArticleList = ({ channelId, activeId }) => {
  const navigator = useNavigate()
  // 存放文章列表数据
  const [list, setList] = useState([])
  // 发送请求获取文章列表数据
  useEffect(() => {
    const load = async () => {
      const res = await request.get('articles', {
        params: {
          channel_id: channelId,
          timestamp: Date.now(),
        }
      })
      setList(res.data.results)
    }
    if (channelId === activeId) {
      load()
    }
  }, [channelId, activeId])

  // 跳转到详情页
  const onToArticleDetail = (art_id)=>{
    navigator(`/article/${art_id}`)
  }
  return (
    <div className={styles.root}>
      <div className='article'>
        <div className='article-item'>
          {
            list.map((item) => (
              <div
                className='article-item'
                key={item.art_id}
                onClick={() => onToArticleDetail(item.art_id)}>
                <ArticleItem article={item}></ArticleItem>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  )
}

export default ArticleList


